<template>
  <div class="main">
    <div class="title">企业微信通知对象</div>
    <div class="current-show">
      当前通知对象：
    </div>
    <el-select class="notice-member-select" size="small" v-model="currentValue" multiple filterable default-first-option placeholder="可输入搜索，选择">
      <el-option v-for="item in allWeComMember" :key="item.userid" :value="item.userid" :label="item.name"></el-option>
    </el-select>
    <div class="submit-btn">
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </div>
</template>

<script>
import {getCompAllMember, setNoticeMember, queryNoticeMember} from '@/api/setting';
export default {
  name: 'setting',
  data() {
    return {
      currentNoticeMember: [{
        userId: 'yujiancong',
        name: '余健聪'
      }],
      currentValue: [],
      allWeComMember: [],
    }
  },
  mounted() {
    this.getAllCompMember()
    this.getNoticeMember()
  },
  methods: {
    async getNoticeMember() {
      let result = await queryNoticeMember()
      this.currentValue = result.data
    },
    async getAllCompMember() {
      let result = await getCompAllMember()
      this.allWeComMember = result.data
    },
    async submit() {
      let data = {
        list: this.currentValue
      }
      let result = await setNoticeMember(data)
      if(result.code === 200) {
        this.$message.success('修改成功')
      } else {
        this.$message.error('修改失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  max-width: 800px;
  padding: 20px;
  .title {
    height: 30px;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    &:before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 20px;
      border-radius: 8px;
      background-color: #4271ff;
      margin-right: 8px;
    }
  }
  .current-show {
    font-size: 14px;
    margin-left: 14px;
    margin-top: 8px;
    .member-tag {
      border: 0;
      background-color: #304156;
      color: #ffffff;
    }
  }
  .notice-member-select {
    margin-top: 20px;
    margin-left: 14px;
    width: calc(100% - 34px);
    ::v-deep .el-select__tags .el-tag {
      background-color: #304156;
      color: #ffffff;
      padding: 0 8px;
      .el-tag__close {
        color: #000000;
        background-color: #fff;
      }
    }
  }
  .submit-btn {
    width: 100%;
    text-align: right;
    margin-top: 20px;
    .el-button {
      margin-right: 20px;
      background-color: #4271ff;
      border: 0;
      width: 80px;
      height: 35px;
      padding: 0;
    }
  }
}
</style>
